<template>

    <div class="item_wrap" @click="toOrderDetial(orderItem.orderid)">
      <p>
        <span>订单号：{{orderItem.orderid}}</span><b>{{orderTypeC}}</b>
      </p>
      <div class="imgs_wrap">
        <div ref="scroll_wrap"  @touchmove="stop_sliderX" @touchstart="start_sliderX">
          <div v-for="item in orderItem.img">
            <img v-lazy="item.img" alt="">
          </div>
          <p v-if="orderItem.img.length===1">{{orderItem.img[0].names}}</p>
        </div>
         <span></span>
      </div>
      <h6>{{orderItem.address}}</h6>
      <h5>
        <span>应付：{{orderItem.total_price}}</span>
        <div>
          <span v-if="orderItem.status===0&&orderItem.payway!==4" @click.stop="toPay(orderItem)">去支付</span>
          <span v-if="orderItem.status!==0" @click.stop="newBy(orderItem.orderid)">再次购买</span>
          <span v-if="orderItem.status===4&&orderItem.isAppraises===1" @click.stop="toComment">查看评价</span>
          <span v-if="orderItem.status===4&&orderItem.isAppraises===0" @click.stop="toComment">评价晒单</span>
          <span v-if="orderItem.status===0" @click.stop="cancleOrder(orderItem.orderid)">取消订单</span>
        </div>
      </h5>
    </div>

</template>

<script>
  import back from 'components/back'
  import {stop_sliderX} from 'assets/base/base'
  import {get_cookie} from 'assets/cookie/cookie'
  import {get_address_list} from 'api/address'
  import {new_by} from 'api/order'
  export default {
    name: "",
    props:['orderItem'],
    data(){
      return{
      }
    },
    created(){
     console.log(this.orderItem)
    },
    activated(){

    },
    mounted(){

    },
    computed:{
       orderTypeC(){
         switch (this.orderItem.status){
           case 0:this.orderType='待支付'
             break
           case 1:this.orderType='待发货'
             break
           case 2:this.orderType='待收货'
             break
           case 4:
              if(this.orderItem.isAppraises===0){
                this.orderType='已完成'
              }else{
                this.orderType='已评价'
              }

             break
           case 9:this.orderType='已取消'
             break
         }
         return this.orderType
       }
    },
    methods:{
      start_sliderX(e){
        this.start={
          X:e.touches[0].pageX,
          Y:e.touches[0].pageY
        }
      },
      stop_sliderX(e){
        console.log(e)
        stop_sliderX(e,this.$refs.scroll_wrap,this.start)
      },
      toPay(orderItem){
        let ua = window.navigator.userAgent.toLowerCase()
        if ((ua.search(/MicroMessenger/i) !== -1)) {
          this.$router.push({
            path: "/pay",
            query: {
              orderId: orderItem.orderid,
              form:'orders'
            }
          })
        } else {
          this.$router.push({
            path: '/payment/pay',
            query: {
              id: orderItem.orderid,
              price: orderItem.total_price,
              form: 'orders'
            }
          })
        }
      },
      cancleOrder(id){
        this.$emit('cancleOrder',id)
      },
      newBy(id){
        new_by({
          token:get_cookie('key'),
          orderId:id
        }).then(res=>{
          if(res.status===200&&res.data.resStatus===0) {
            this.$parent.$parent.$parent.get_car_number()
            this.$router.push('/shop_car')
          }
        })
      },
      toOrderDetial(id){
        console.log()
        this.$router.push({
          path:this.$route.path+"/orderDetial",
          query: {
            orderId:id,
            type:this.$route.query.type
          }
        })
      },
      toComment(){
        this.$router.push({
          path:"/appraise_list",
          query: {
            orderId:this.orderItem.orderid
          }
        })
      }
    },
    components:{
      back,
    }
  }
</script>

<style scoped lang="scss">
       .item_wrap{
         margin-bottom: 30px;
         >p{
           height: 21px;
           font-size: 14px;
           >span{
             float: left;
             margin-left: 6%;
           }
           >b{
             float: right;
             margin-right: 20px;
             font-weight: 500;
             color: #4caeea;
           }
         }
         >h6{
           margin-top: 9px;
           padding-bottom: 5px;
           text-align: left;
           border-bottom: 1px solid #ddd;
           color: #666;
           font-weight: 500;
           font-size: 14px;
           margin-left: 6%;
           margin-right: 20px;
         }
         >h5{
           height: 40px;
           line-height: 40px;
           position: relative;
           background-color: #fff;
           >span{
             float: left;
             margin-left: 6%;
             font-size: 14px;
           }
           >div{
             float: right;
             margin-right: 20px;
             >span{
               float: right;
               margin-left: 15px;
               height: 30px;
               line-height: 30px;
               margin-top: 5px;
               width: 64px;
               border-radius: 5px;
               background-color: #2096d4;
               color: #fff;
             }
             >span:last-child{
               background-color: #fff;
               border: 1px solid #777;
               color: #666;
             }
           }
         }
       }
  .imgs_wrap{
    padding-bottom: 3px;
    padding-top: 3px;
    background: #eee;
    padding-left: 3%;
    padding-right: 50px;
    position: relative;
    >div{
      white-space: nowrap;
      overflow: auto;
      box-sizing: content-box;
      text-align: left;
      padding-bottom: 55px;
      margin-bottom: -55px;
      padding-left: 1%;
      padding-right: 1%;
      -webkit-overflow-scrolling: touch;
      >div{
        display: inline-block;
        width: 30%;
        margin: 1.7%;
        background-color: #fff;
        position: relative;
        padding-top: 30%;
        vertical-align: middle;
        >img{
          width: 100%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      >p{
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        font-weight: bold;
      }
    }
    >span{
      position: absolute;
      width: 15px;
      height: 30px;
      top: 50%;
      transform: translateY(-50%);
      right: 17px;
      background-image: url('../assets/img/right.png');
      background-size: 100% 100%;
    }
  }

</style>
